<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 链接到外部样式表要用link ,而不是 style -->
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 内部样式表 -->
    <!-- <style type="text/css">
        h1 {
            color: rgb(204, 65, 65);
        }
        a {
            text-decoration: none;
            color: rgb(233, 161, 68);
        }
    </style> -->
</head>

<!-- bgcolor 这个属性已经被淘汰了 -->
<!-- <body bgcolor="gray"> -->

<body style="background-color: bisque;">
    <a href="#one">dddddd</a>
    <!-- <br> 换行 -->
    <!-- <hr> 水平线 -->
    <p>段落</p><br>
    <hr>
    <!-- 对标题进行居中显示 -->
    <h1 align="center">居中的标题</h1>
    <h2 align="left">局左显示的标题</h2>
    <h3 align="right">局右显示的标题</h3>
    <hr>
    <p>align 已经被淘汰掉啦</p>
    <h1 style="text-align: center;">试试新的大标题居中</h1>

    <!-- 可以给body元素添加属性，改变背景颜色； -->
    块级元素有哪些？浏览器会自动的在块级元素前后添加空行；
    p是块级元素,标题标签
    <hr>
    <p>style元素</p>
    <p style="font-family: 'Courier New', Courier, monospace; color: rgb(175, 210, 210); font-size: small;">
        我要试试这么好用的style元素</p>

    <pre>
        离离原上草，
        一岁一枯荣。
    </pre>

    <abbr title="这是一个好玩儿的缩略词">缩略词</abbr>
    <p>删除文本 del 和下划线文本 del</p>
    <p>
        <del>删除</del>
        <ins>下划线</ins>
    </p>
    <q>这个会带引号</q>
    <p>李白说：<q>q11111</q></p>
    <blockquote>这是长引用，会有首行缩进功能</blockquote>
    <p><dfn>dfn有三种用法，dfN能对搜索引擎提供一些信息</dfn></p>
    <p><dfn>这是dfn</dfn></p>
    <p> <dfn title="dfn"> 这是第二个dfn</dfn></p>
    <p>这是 <abbr title="dfn">第三个</dfn>dfn</p>

    <hr>

    <address>address有固定的格式，每行都会顶格写；<br>
        address有固定的格式，每行都会顶格写；<br>
        address有固定的格式，每行都会顶格写；<br>
    </address>

    <p><cite>大鱼</cite>这样的标题</p>
    <p> <bdo dir="rtl">看不出来这个从右向左书写，有什么作用</bdo></p>
    <hr>
    <a href="http://baidu.com" name="one">点击一下，跳转到百度</a>
    <hr>
    <p style="color: aqua;">内联样式表(内联在标签里面的，所以叫内联样式表)</p>

    <p> <a href="http://baidu.com" target="_blank" name="two">点击这个图片跳转到百度<img src="../images/绿草茵茵.jpg" alt="草草"></a></p>

    <a href="#two">命名锚很好用</a>
    <hr>
    <h1>图像</h1>
    <p><img src="../images/翱翔天际.jpg" alt="天空" align="middle" width="100px" height="100px">居中对齐的图片</p>

</body>

</html>